<template>
	<view>
		<div class="navbar">
			<view class="tfc-list" v-if="navbarList.length<6">
				<view class="tfc-item" :style="{width: 100/navbarList.length+'%',height,lineHeight:height,padding: height?'0':'30rpx 0'}"
				 :class="{active: curBar.alias === item.alias}" v-for="(item, index) in navbarList" :key="index" @click="handleChooseNavbar(item,index)">{{item.name}}</view>
			</view>
		</div>

		<view class="navbar_long" :style="{height}" v-if="navbarList.length>=6">
			<scroll-view scroll-x class="list_long" :scroll-left="curScrollWidth || '10px'" :style="{width:'100%',height}"
			 @scroll="handleLongNavbarScroll">
				<view class="item_long" :style="{height,lineHeight:height,padding: height?'0 30rpx':'30rpx'}" :class="{active: curBar.alias === item.alias}"
				 v-for="(item, index) in navbarList" :key="index" @click="handleChooseNavbar(item,index)">{{item.name}}</view>
			</scroll-view>
		</view>


		<view class="swiper-wrap" :style="{height: height? `calc(100vh - ${height})`:''}">
			<swiper class="swiper" :current="curSwiperIndex" @change="handleSwiper">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" class="content-wrap" refresher-enabled enable-back-to-top :refresher-triggered="refresherTriggered"
					 @scrolltolower="handleScrolltolower" @refresherrefresh="handleRefresherrefresh">
						<view class="content" v-if="dateList[0].length">
							<view class="text" v-for="(item, index) in dateList[0]" :key="index">
								<CommonOrderListBus :dateInfo="item" :curNavbar="curBar"></CommonOrderListBus>
							</view>
						</view>
						<view class="nodata" v-else>这里还木有数据哈~~</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" class="content-wrap" refresher-enabled enable-back-to-top :refresher-triggered="refresherTriggered"
					 @scrolltolower="handleScrolltolower" @refresherrefresh="handleRefresherrefresh">
						<view class="content" v-if="dateList[1].length">
							<view class="text" v-for="(item, index) in dateList[1]" :key="index">
								<CommonOrderListCarpool :dateInfo="item" :curNavbar="curBar"></CommonOrderListCarpool>
							</view>
						</view>
						<view class="nodata" v-else>这里还木有数据哈~~</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" class="content-wrap" refresher-enabled enable-back-to-top :refresher-triggered="refresherTriggered"
					 @scrolltolower="handleScrolltolower" @refresherrefresh="handleRefresherrefresh">
						<view class="content" v-if="dateList[2].length">
							<view class="text" v-for="(item, index) in dateList[2]" :key="index">
								<CommonOrderListChartered :dateInfo="item" :curNavbar="curBar"></CommonOrderListChartered>
							</view>
						</view>
						<view class="nodata" v-else>这里还木有数据哈~~</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" class="content-wrap" refresher-enabled enable-back-to-top :refresher-triggered="refresherTriggered"
					 @scrolltolower="handleScrolltolower" @refresherrefresh="handleRefresherrefresh">
						<view class="content" v-if="dateList[3].length">
							<view class="text" v-for="(item, index) in dateList[3]" :key="index">
								<CommonOrderListRent :dateInfo="item" :curNavbar="curBar"></CommonOrderListRent>
							</view>
						</view>
						<view class="nodata" v-else>这里还木有数据哈~~</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import CommonOrderListBus from '../common/common-orderList-bus.vue'
	import CommonOrderListCarpool from '../common/common-orderList-carpool.vue'
	import CommonOrderListChartered from '../common/common-orderList-chartered.vue'
	import CommonOrderListRent from '../common/common-orderList-rent.vue'
	export default {
		components: {
			CommonOrderListBus,
			CommonOrderListCarpool,
			CommonOrderListChartered,
			CommonOrderListRent
		},
		props: {
			navbarList: {
				type: Array,
				default () {
					return []
				}
			},
			curNavbar: {
				type: [Object, Boolean],
				default () {
					return false
				}
			},
			height: {
				type: [String, Boolean],
				default () {
					return false
				}
			},
			dateList: {
				type: [Array],
				default () {
					return []
				}
			}
		},
		data() {
			return {
				curSwiperIndex: 0,
				curBar: this.curNavbar,
				refresherTriggered: true, // 设置当前下拉刷新状态
				maxScrollWidth: 0,
			}
		},
		mounted() {

		},
		computed: {
			curScrollWidth() {
				let num = 80 * (this.curSwiperIndex - 2)
				if (num >= this.maxScrollWidth) {
					num = this.maxScrollWidth
				}
				return num
			}
		},
		methods: {
			handleChooseNavbar(item, i) {
				this.curBar = item
				this.curSwiperIndex = i // 通知调用handleSwiper方法
			},
			handleSwiper(e) {
				let i = e.detail.current
				this.curBar = this.navbarList[i]
				this.curSwiperIndex = i
				this.$emit('handleChooseNavbar', this.curBar, i)
			},
			handleScrolltolower() { // 滚动到底部
				this.$emit('handleScrolltolower', this.curBar, this.curSwiperIndex)
			},
			handleRefresherrefresh() { // 下拉刷新
				this.refresherTriggered = true
				this.$emit('handleRefresherrefresh', this.curBar, this.curSwiperIndex)
			},
			stopPullDownRefresh() {
				this.refresherTriggered = false
			},
			handleLongNavbarScroll(e) {
				this.maxScrollWidth = e.detail.scrollWidth * 2 - 750
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nodata {
		text-align: center;
		color: #999;
		margin: 100rpx auto;
	}

	.navbar {
		.tfc-list {
			display: flex;
			justify-content: space-evenly;
			z-index: 2;
			background-color: #fff;

			.tfc-item {
				font-size: 32rpx;
				transition: all 0.1s ease-in;
				text-align: center;

				&.active {
					color: $blue;
					position: relative;
					font-weight: bold;

					&::before {
						content: '';
						height: 6rpx;
						width: 36rpx;
						border-radius: 3rpx;
						background-color: $blue;
						position: absolute;
						bottom: 0rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}

	.navbar_long {
		background-color: #fff;

		.list_long {
			white-space: nowrap;
			overflow: hidden;

			.item_long {
				font-size: 32rpx;
				font-weight: bold;
				transition: all 0.1s ease-in;
				display: inline-block;

				&.active {
					color: $blue;
					position: relative;

					&::before {
						content: '';
						height: 6rpx;
						width: 36rpx;
						border-radius: 3rpx;
						background-color: $blue;
						position: absolute;
						bottom: 0rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}

	.swiper-wrap {
		.swiper {
			.swiper-item {
				.content-wrap {
					height: 100%;
					box-sizing: border-box;

					.content {
						padding: 20rpx 30rpx;
					}
				}
			}
		}
	}
</style>
